<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '聊天记录',
  },
}
</route>

<template>
  <view class="page-container bg-gray-1 px-4 py-4">
    <view v-for="(item, index) in chatList" :key="index">
      <view class="flex items-start mb-4" v-if="item.flag == '2'">
        <img :src="item.avatar" class="w-10 h-10 rounded-full mr-2" />
        <view class="max-w-[70%]">
          <view class="text-sm text-gray-600 mb-1">{{ item.name }}</view>
          <view class="bg-white px-4 py-2 rounded-lg text-sm inline-block">{{ item.content }}</view>
          <view class="text-xs text-gray-400 mt-1">{{ item.msgtime }}</view>
        </view>
      </view>

      <view class="flex items-start justify-end mb-4" v-else>
        <view class="max-w-[70%] text-right">
          <view class="text-sm text-gray-600 mb-1">{{ item.name }}</view>
          <view class="bg-[#4A90E2] text-left text-white px-4 py-2 rounded-lg text-sm inline-block">
            {{ item.content }}
          </view>
          <view class="text-xs text-gray-400 mt-1">{{ item.msgtime }}</view>
        </view>
      </view>
    </view>

    <!-- <view class="flex items-start justify-end mb-4">
      <view class="max-w-[70%] text-right">
        <view class="text-sm text-gray-600 mb-1">我</view>
        <view class="bg-[#4A90E2] text-left text-white px-4 py-2 rounded-lg text-sm inline-block">
          我今天再去一趟
        </view>
        <view class="text-xs text-gray-400 mt-1">2025-03-18 07:04:48</view>
      </view>
    </view>

    <view class="flex items-start mb-4">
      <img
        src="https://ai-public.mastergo.com/ai/img_res/71c407dcaddccee5e3925cfdf32e3cea.jpg"
        class="w-10 h-10 rounded-full mr-2"
      />
      <view class="max-w-[70%]">
        <view class="text-sm text-gray-600 mb-1">李小姐</view>

        <view class="bg-white px-4 py-2 rounded-lg text-sm inline-block">没事</view>
        <view class="text-xs text-gray-400 mt-1">2025-03-18 07:04:55</view>
      </view>
    </view>

    <view class="flex items-start justify-end mb-4">
      <view class="max-w-[70%] text-right">
        <view class="text-sm text-gray-600 mb-1">我</view>
        <view class="bg-[#4A90E2] text-left text-white px-4 py-2 rounded-lg text-sm inline-block">
          有可能是他的宠物狗半夜扒拉东西
        </view>
        <view class="text-xs text-gray-400 mt-1">2025-03-18 07:05:00</view>
      </view>
    </view>

    <view class="flex items-start mb-4">
      <img
        src="https://ai-public.mastergo.com/ai/img_res/71c407dcaddccee5e3925cfdf32e3cea.jpg"
        class="w-10 h-10 rounded-full mr-2"
      />
      <view class="max-w-[70%]">
        <view class="text-sm text-gray-600 mb-1">李小姐</view>
        <view class="bg-white px-4 py-2 rounded-lg text-sm inline-block">我群里说过了</view>
        <view class="text-xs text-gray-400 mt-1">2025-03-18 07:05:01</view>
      </view>
    </view>

    <view class="flex items-start justify-end mb-4">
      <view class="max-w-[70%] text-right">
        <view class="text-sm text-gray-600 mb-1">我</view>
        <view class="bg-[#4A90E2] text-left text-white px-4 py-2 rounded-lg text-sm inline-block">
          我去提醒一下
        </view>
        <view class="text-xs text-gray-400 mt-1">2025-03-18 07:05:00</view>
      </view>
    </view>

    <view class="flex items-start mb-4">
      <img
        src="https://ai-public.mastergo.com/ai/img_res/71c407dcaddccee5e3925cfdf32e3cea.jpg"
        class="w-10 h-10 rounded-full mr-2"
      />
      <view class="max-w-[70%]">
        <view class="text-sm text-gray-600 mb-1">李小姐</view>
        <view class="bg-white px-4 py-2 rounded-lg text-sm inline-block">小鑫</view>
        <view class="text-xs text-gray-400 mt-1">2025-03-18 07:05:01</view>
      </view>
    </view>
    <view class="flex items-start mb-4">
      <img
        src="https://ai-public.mastergo.com/ai/img_res/71c407dcaddccee5e3925cfdf32e3cea.jpg"
        class="w-10 h-10 rounded-full mr-2"
      />
      <view class="max-w-[70%]">
        <view class="text-sm text-gray-600 mb-1">李小姐</view>
        <view class="bg-white px-4 py-2 rounded-lg text-sm inline-block">停电了吗</view>
        <view class="text-xs text-gray-400 mt-1">2025-03-18 07:05:01</view>
      </view>
    </view> -->
  </view>
</template>

<script lang="ts" setup>
//
import { getChatDataList, IChat } from './api'
const chatList = ref<IChat[]>([])
onMounted(() => {
  // 滚动到页面最底部
  uni.pageScrollTo({
    scrollTop: 9999,
    duration: 300,
  })
})

onLoad((params) => {
  const butlerId = params.butlerId
  const externalUserid = params.externalUserid

  getChatDataList({ butlerId, externalUserid }).then((res: IResData<IChat[]>) => {
    console.log(res)
    // 获取数组中某个字段长度最长的值
    const shorterSender = findShortestSender(res.rows)
    chatList.value = res.rows.map((item) => {
      const sender = item.sender
      const senderName = shorterSender === sender ? '管家' : '业主'
      const contentObj = JSON.parse(item.content)
      return {
        ...item,
        senderName,
        content: contentObj.content,
      }
    })
  })
})
function findShortestSender(messages) {
  let shortestSender = null // 初始化为 null，表示尚未找到
  let minLength = Infinity // 初始化为无穷大，以便任何长度都会比它小

  for (let i = 0; i < messages.length; i++) {
    const sender = messages[i].sender
    const length = sender.length

    if (length < minLength) {
      minLength = length
      shortestSender = sender
    }
  }

  return shortestSender
}
</script>

<style lang="scss" scoped>
//
.page-container {
  min-height: 100vh;
}
.chat-bubble-left {
  position: relative;
  background: #fff;
  border-radius: 12px;
  padding: 12px;
  max-width: 70%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.chat-bubble-right {
  position: relative;
  background: #95ec69;
  border-radius: 12px;
  padding: 12px;
  max-width: 70%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
.voice-message {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 120px;
}
</style>
